<template>
  <div class="div-commodity">
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      @close="dialogVisibleClose"
      width="80%"
      top="10vh"
      destroy-on-close
      :modal="isMask"
    >
      <div class="dialog_div_new">
        <div class="dialog_middle">
          <div style="height: 52px; margin-top: 20px; display: flex; align-items: center">
            <div style="min-width: 60px; font-size: 12px">商品图片</div>
            <div style="display: flex; flex-wrap: wrap; margin-left: 8px">
              <draggable v-model="attachments" @end="onMoveEnd" style="display: flex">
                <div
                  style="position: relative"
                  class="attachment_view"
                  v-for="(item, index) in attachments"
                  :key="index"
                >
                  <el-image
                    style="width: 100%; height: 100%; border-radius: 3px"
                    :src="item"
                    :preview-src-list="attachments"
                  >
                  </el-image>
                  <div class="attachment_mask">
                    <img src="@/assets/att_del.png" style="width: 100%; height: 100%" @click="delAttachment(index)" />
                  </div>
                  <div class="attachment_mask_pre">
                    <img src="@/assets/att_pre.png" />
                  </div>
                </div>
              </draggable>
              <el-upload
                v-if="attachments.length < 5"
                class="uploader"
                :action="uploadAction"
                :on-success="handleSuccess"
                :headers="headers"
                :show-file-list="false"
                :before-upload="beforeUpload"
                list-type="picture"
                multiple
              >
                <img src="@/assets/att_add.png" style="width: 100%; height: 100%" />
              </el-upload>
            </div>
            <div style="font-size: 9px">
              第一张图片为主图，可拖动图片调整顺序，支持jpg. jpeg. png图片格式，最多支持5张
            </div>
          </div>
          <el-form ref="ruleForm" :model="newData" :rules="rules">
            <div class="form_div">
              <el-form-item label="商品名称" prop="goodsName" class="spmc_div">
                <el-input v-model="newData.goodsName" @blur="getNameToPinying" ref="nameInput"></el-input>
                <!-- <el-button type="primary" @click="retrieveGoods">商品库</el-button> -->
              </el-form-item>
              <el-form-item label="商品编码" prop="goodsNumber">
                <el-input v-model="newData.goodsNumber"></el-input>
              </el-form-item>
              <el-form-item label="拼音码" prop="pinyinCode">
                <el-input v-model="newData.pinyinCode"></el-input>
              </el-form-item>
            </div>
            <div class="form_div">
              <el-form-item label="商品性质" prop="goodsNatureName">
                <j-dict-select-tag
                  id="goodsNatureId"
                  type="select"
                  dictCode="goods_nature"
                  style="width: 100%"
                  v-model="newData.goodsNatureId"
                ></j-dict-select-tag>
              </el-form-item>
              <el-form-item @click="onShowTree" label="商品类别" prop="xghGoodsTypeName" class="line_dialog">
                <!-- <input @click="onShowTree" type="text" :value="newData.xghGoodsTypeName" />
                <i @click="onShowTree" class="el-icon-more"></i>-->
                <el-select v-model="newData.xghGoodsTypeId">
                  <el-option
                    style="font-size: 12px"
                    v-for="item in splbOptions"
                    :key="item.id"
                    :label="item.goodsTypeName"
                    :value="item.id"
                  ></el-option>
                  <el-option key label value>
                    <div class="custom_add" @click.stop="onAddTree()">
                      <i class="el-icon-plus"></i>
                      <span>新增</span>
                    </div>
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="产地" prop="productionAddress">
                <el-input v-model="newData.productionAddress"></el-input>
              </el-form-item>
            </div>
            <div class="form_div">
              <el-form-item label="条形码" prop="barCode" class="line_dialog">
                <el-input v-model="newData.barCode"></el-input>
                <p class="scan_p" @click="scanClick()">
                  <svg-icon icon-class="scanCode"></svg-icon>
                  <span>扫码</span>
                </p>
              </el-form-item>
              <el-form-item label="规格" prop="specs">
                <el-input v-model="newData.specs"></el-input>
              </el-form-item>
              <el-form-item label="成本核算" prop="costCalculation">
                <!-- <el-input class="disable_input" disabled v-model="newData.costCalculation"></el-input> -->
                <j-dict-select-tag
                  type="select"
                  dictCode="cost_calculation"
                  style="width: 100%"
                  v-model="newData.costCalculation"
                ></j-dict-select-tag>
              </el-form-item>
            </div>
            <div class="form_div">
              <el-form-item label="基本单位" prop="baseUnit">
                <el-select
                  @change="onChangeJbdw(newData)"
                  v-model="newData.baseUnit"
                  filterable
                  default-first-option
                  :disabled="newData.doOrder == '1'"
                >
                  <el-option
                    @click.native="onClickJbdw(item)"
                    v-for="item in jbdwOptions"
                    :key="item.id"
                    :label="item.unitName"
                    :value="item.id"
                  ></el-option>
                  <el-option key label value>
                    <div class="custom_add" @click.stop="showDialogVisible()">
                      <i class="el-icon-plus"></i>
                      <span>新增</span>
                    </div>
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="默认单位" prop="defaultUnit">
                <el-select v-model="newData.defaultUnit" @focus="defaultUnitFocus">
                  <el-option
                    v-for="item in mrdwOptions"
                    :key="item.unitName"
                    :label="item.unitName"
                    :value="item.unitName"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label prop></el-form-item>
            </div>
          </el-form>
          <!-- 商品特殊功能模块 -->
          <div>
            <div class="input_switch">
              <p style="font-size: 16px; color: #1893fc">商品特殊功能模块</p>
              <el-switch
                style="margin-left: 20px"
                v-model="newData.specialFunction"
                active-color="#1A93FA"
                inactive-color="#D3D2D2"
              ></el-switch>
              <!-- doOrder 1 已做单据 0 未做单据 -->
              <el-checkbox
                :disabled="!newData.specialFunction || newData.doOrder == '1'"
                v-model="newData.specialFunctionTypeColorSize"
                @change="colorSizeStatusChange"
                >颜色尺码</el-checkbox
              >
            </div>
            <el-row v-if="newData.specialFunction && newData.specialFunctionTypeColorSize">
              <el-col :span="8">
                <div class="special_item">
                  <div class="special_text">颜色</div>
                  <div class="special_content" @click="onSelectColorSize('color')">
                    <div class="special_value">{{ newData.specialFunctionColorStr }}</div>
                    <span>选择</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="special_item" style="margin-left: 2%">
                  <div class="special_text">尺码</div>
                  <div class="special_content" @click="onSelectColorSize('size')">
                    <div class="special_value">{{ newData.specialFunctionSizeStr }}</div>
                    <span>选择</span>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
          <!-- 价格管理 -->
          <div class="input_switch">
            <div>
              <p>价格管理</p>
              <el-switch
                style="margin-left: 20px"
                v-model="newData.priceStatus"
                active-color="#1A93FA"
                inactive-color="#D3D2D2"
              ></el-switch>
              <el-checkbox
                :disabled="!newData.priceStatus"
                v-model="newData.multiPriceStatus"
                @change="multiPriceStatusChange"
                >多单位及价格</el-checkbox
              >
            </div>
          </div>
          <div class="sub_table" v-if="newData.priceStatus">
            <el-table
              :data="newData.goodsManyNorms"
              style="width: 100%"
              border
              max-height="250"
              :row-style="{ height: '30px' }"
              :cell-style="{ padding: '0', borderColor: 'rbg(227,227,227)' }"
              :header-cell-style="{
                fontSize: '12px',
                background: '#E3F6FF',
                color: '#666666',
                textAlign: 'center',
                height: '30px',
                borderColor: '#dddddd',
              }"
              @row-click="onClickJggl"
            >
              <el-table-column>
                <el-table-column type="index" width="60" label="序号">
                  <template slot-scope="scope">
                    <div v-if="scope.$index == 0">
                      <div v-if="scope.row.xhState">{{ scope.$index + 1 }}</div>
                      <div v-else class="first_index_button">
                        <i
                          v-if="newData.multiPriceStatus"
                          @click.stop="addRow(scope.$index, 'jggl')"
                          class="el-icon-circle-plus-outline"
                        ></i>
                        <p v-else>{{ scope.$index + 1 }}</p>
                      </div>
                    </div>
                    <div v-else>
                      <div v-if="scope.row.xhState">{{ scope.$index + 1 }}</div>
                      <div v-else class="index_button">
                        <i @click.stop="addRow(scope.$index, 'jggl')" class="el-icon-circle-plus-outline"></i>
                        <i @click="deleteRow(scope.$index, 'jggl')" class="el-icon-remove-outline"></i>
                      </div>
                    </div>
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column v-for="(item1, index1) in jgglColumn1" :key="index1" :label="item1.label">
                <el-table-column
                  min-width="150"
                  v-for="(item, index) in item1.subset"
                  :key="index"
                  :prop="item.props"
                  :label="item.label"
                >
                  <template slot-scope="scope">
                    <div v-if="scope.$index == 0">
                      <div v-if="scope.row.xhState" :class="[scope.row.isDefault == '1' ? 'first_line' : '']">
                        {{ scope.row[item.props] }}
                      </div>
                      <div v-else class="index_input">
                        <p v-if="item.props == 'unitType' || item.props == 'unit' || item.props == 'scale'">
                          {{ scope.row[item.props] }}
                        </p>
                        <input
                          v-else
                          @focusin="focusinSelect"
                          @focusout="focusout($event, item)"
                          type="text"
                          v-model="scope.row[item.props]"
                        />
                      </div>
                    </div>
                    <div v-else>
                      <div v-if="scope.row.xhState" :class="[scope.row.isDefault == '1' ? 'first_line' : '']">
                        {{ scope.row[item.props] }}
                      </div>
                      <div v-else-if="item.props.includes('extendField')">
                        {{ scope.row[item.props] }}
                      </div>
                      <div v-else class="index_input">
                        <p v-if="item.props == 'unitType'">{{ scope.row[item.props] }}</p>
                        <input
                          v-else-if="item.props == 'scale'"
                          @focusin="focusinSelect"
                          type="number"
                          onkeyup="value=value.replace(/\D/g,'')"
                          v-model="scope.row[item.props]"
                          @input="scaleInput(scope.row[item.props], scope.$index)"
                          min="1"
                        />
                        <input v-else @focusin="focusinSelect" type="text" v-model="scope.row[item.props]" />
                      </div>
                    </div>
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table>
          </div>
          <div class="input_switch">
            <div>
              <p>仓库预警</p>
              <el-switch
                style="margin-left: 20px"
                v-model="newData.stockWarningStatus"
                active-color="#1A93FA"
                inactive-color="#D3D2D2"
              ></el-switch>
              <el-checkbox
                :disabled="!newData.stockWarningStatus"
                v-model="newData.multiStockWarningStatus"
                @change="multiStockWarningStatusChange"
                >分仓库预警</el-checkbox
              >
            </div>
          </div>
          <div class="sub_table" v-if="newData.stockWarningStatus">
            <el-table
              :data="newData.goodsWarnings"
              style="width: 100%"
              border
              max-height="250"
              :row-style="{ height: '30px' }"
              :cell-style="{ padding: '0', borderColor: 'rbg(227,227,227)' }"
              :header-cell-style="{
                background: 'rgb(237,237,237)',
                color: '#666',
                textAlign: 'center',
                borderColor: 'rbg(227,227,227)',
              }"
              @row-click="onClickCkyj"
            >
              <el-table-column type="index" width="60" label="序号">
                <template slot-scope="scope">
                  <div v-if="scope.$index == 0">
                    <div v-if="scope.row.xhState">{{ scope.$index + 1 }}</div>
                    <div v-else class="first_index_button">
                      <i
                        v-if="newData.multiStockWarningStatus"
                        @click.stop="addRow(scope.$index, 'ckyj')"
                        class="el-icon-circle-plus-outline"
                      ></i>
                      <p v-else>{{ scope.$index + 1 }}</p>
                    </div>
                  </div>
                  <div v-else>
                    <div v-if="scope.row.xhState">{{ scope.$index + 1 }}</div>
                    <div v-else class="index_button">
                      <i @click.stop="addRow(scope.$index, 'ckyj')" class="el-icon-circle-plus-outline"></i>
                      <i @click="deleteRow(scope.$index, 'ckyj')" class="el-icon-remove-outline"></i>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column v-for="(item, index) in ckyjColumn" :key="index" :prop="item.props" :label="item.label">
                <template slot-scope="scope">
                  <!--自动计算总库存预警-->
                  <!--<div v-if="scope.$index == 0">
                    <div
                      class="first_line"
                      v-if="item.props == 'xghStorehouseName'"
                    >{{ scope.row[item.props] }}</div>
                    <div class="first_line" v-else-if="item.props == 'miniStock'">{{ zdkcNum }}</div>
                    <div class="first_line" v-else-if="item.props == 'highStock'">{{ zgkcNum }}</div>
                  </div>-->
                  <div>
                    <div v-if="scope.row.xhState">{{ scope.row[item.props] }}</div>
                    <div v-else-if="item.props == 'xghStorehouseName'" class="index_select">
                      <!--手动输入总库存预警-->
                      <div v-if="scope.$index === 0" style="text-align: center; width: 100%">
                        {{ scope.row[item.props] }}
                      </div>
                      <el-select v-else v-model="scope.row[item.props]">
                        <el-option
                          @click.native="onSelectCkyjCkmc(item)"
                          v-for="item in ckyjCkmcOptions"
                          :key="item.value"
                          :label="item.storehouseName"
                          :value="item.storehouseName"
                        ></el-option>
                      </el-select>
                    </div>
                    <div v-else class="index_input">
                      <input
                        @focusin="focusinSelect"
                        type="number"
                        v-model="scope.row[item.props]"
                        @blur="blurCkyj(scope.row, item.props)"
                      />
                    </div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="input_switch">
            <div>
              <p>期初库存</p>
              <el-switch
                style="margin-left: 20px"
                v-model="newData.stockStatus"
                active-color="#1A93FA"
                inactive-color="#D3D2D2"
                @change="stockStatusChange"
                :disabled="stockStatusDisabled"
              ></el-switch>
              <el-checkbox
                v-model="newData.multiStockStatus"
                @change="multiStockStatusChange"
                :disabled="multiStockStatusDisabled"
                >分仓库期初</el-checkbox
              >
              <span>注：期初库存首次录入后，开单后不可修改。</span>
            </div>
          </div>
          <div class="sub_table" v-if="newData.stockStatus">
            <div class="mask_view" v-if="newData.initStorehouseStatus == 1"></div>
            <el-table
              :data="newData.initialInventoryInfos"
              style="width: 100%"
              border
              show-summary
              :summary-method="getSummaries"
              max-height="250"
              :row-style="{ height: '30px' }"
              :cell-style="{ padding: '0', borderColor: 'rbg(227,227,227)' }"
              :header-cell-style="{
                background: 'rgb(237,237,237)',
                color: '#666',
                textAlign: 'center',
                borderColor: 'rbg(227,227,227)',
              }"
              @row-click="onClickQckc"
            >
              <el-table-column type="index" width="60" label="序号">
                <template slot-scope="scope">
                  <div v-if="scope.$index == 0">
                    <div v-if="scope.row.xhState">{{ scope.$index + 1 }}</div>
                    <div v-else class="first_index_button">
                      <i
                        v-if="newData.multiStockStatus && !stockStatusDisabled"
                        @click.stop="addRow(scope.$index, 'qckc')"
                        class="el-icon-circle-plus-outline"
                      ></i>
                      <p v-else>{{ scope.$index + 1 }}</p>
                    </div>
                  </div>
                  <div v-else>
                    <div v-if="scope.row.xhState">{{ scope.$index + 1 }}</div>
                    <div v-else-if="!stockStatusDisabled" class="index_button">
                      <i @click.stop="addRow(scope.$index, 'qckc')" class="el-icon-circle-plus-outline"></i>
                      <i @click="deleteRow(scope.$index, 'qckc')" class="el-icon-remove-outline"></i>
                    </div>
                    <div v-else class="first_index_button">
                      <p>{{ scope.$index + 1 }}</p>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column v-for="(item, index) in qckcColumn" :key="index" :prop="item.props" :label="item.label">
                <template slot-scope="scope">
                  <div v-if="stockStatusDisabled">
                    <div v-if="scope.row.xhState" class="first_line">{{ scope.row[item.props] }}</div>
                    <div v-else class="index_input">
                      <p>{{ scope.row[item.props] }}</p>
                    </div>
                  </div>
                  <div v-else-if="scope.$index == 0">
                    <div v-if="scope.row.xhState" class="first_line">{{ scope.row[item.props] }}</div>
                    <div v-else class="index_input">
                      <el-select
                        v-if="item.props == 'unit'"
                        v-model="scope.row[item.props]"
                        @change="changeUnit(scope.row)"
                      >
                        <el-option
                          v-for="(a, b) in newData.goodsManyNorms"
                          :key="a.unit"
                          :label="a.unit"
                          :value="a.unit"
                        ></el-option>
                      </el-select>
                      <p v-else-if="item.props == 'storehouseId_dictText' || item.props == 'stockPriceShow'">
                        {{ scope.row[item.props] }}
                      </p>
                      <input
                        v-else
                        @focusin.stop="focusinSelect"
                        type="number"
                        @blur="onNumber(item.props, scope.row)"
                        v-model="scope.row[item.props]"
                      />
                    </div>
                  </div>
                  <div v-else>
                    <div v-if="scope.row.xhState">{{ scope.row[item.props] }}</div>
                    <el-select
                      v-else-if="item.props == 'unit'"
                      v-model="scope.row[item.props]"
                      @change="changeUnit(scope.row)"
                    >
                      <el-option
                        v-for="(a, b) in newData.goodsManyNorms"
                        :key="a.unit"
                        :label="a.unit"
                        :value="a.unit"
                      ></el-option>
                    </el-select>
                    <div v-else-if="item.props == 'storehouseId_dictText'" class="index_select">
                      <el-select v-model="scope.row[item.props]">
                        <el-option
                          @click.native="onSelectQckcCkmc(item)"
                          v-for="item in ckyjCkmcOptions"
                          :key="item.value"
                          :label="item.storehouseName"
                          :value="item.storehouseName"
                        ></el-option>
                      </el-select>
                    </div>
                    <div v-else class="index_input">
                      <p v-if="item.props == 'stockPriceShow'">{{ scope.row[item.props] }}</p>
                      <input
                        v-else
                        @focusin.stop="focusinSelect"
                        type="number"
                        @blur="onNumber(item.props, scope.row)"
                        v-model="scope.row[item.props]"
                      />
                    </div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="input_textarea">
            <p>备注</p>
            <textarea rows="5" cols="5" v-model="newData.goodsRemark"></textarea>
          </div>
        </div>
      </div>
      <div class="dialog_bottom">
        <el-button type="primary" @click.stop="onAddSubmit(false)" :loading="submitLoading">保存</el-button>
        <el-button @click.stop="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click.stop="onAddSubmit(true)" :loading="submitLoading">保存并新增</el-button>
      </div>
    </el-dialog>
    <!-- 选择商品库 -->
    <DialogCommodityLibrary
      ref="commodityLibraryRef"
      :commodityName="newData.goodsName"
      @onSelectCommodity="onSelectCommodity"
    ></DialogCommodityLibrary>
    <!-- 选择类别 -->
    <DialogTree ref="treeRef" :toTreeData="toTreeData" @onSelectTree="onSelectTree"></DialogTree>
    <!-- 提醒弹框 -->
    <PopupReminder ref="reminderRef" :tipsData="tipsData"></PopupReminder>
    <!-- 新增树形结构数据弹框 -->
    <el-dialog title="类别信息" :visible.sync="showNewTree" width="480px">
      <NewCategory
        :newTreeData="newTreeData"
        @onSaveTreeChanges="onSaveTreeChanges"
        @onCancelTree="showNewTree = false"
      ></NewCategory>
    </el-dialog>
    <!-- 成功弹框 -->
    <!-- <PopupSuccess ref="successRef" :tipsData="tipsData"></PopupSuccess> -->
    <el-dialog title="新增基本单位" :visible.sync="jbdwDialogVisible" width="30%">
      <el-input v-model="addUnitName" ref="autofocus" placeholder="请输入基本单位" style="padding: 30px"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="jbdwDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onAddjbdw">确 定</el-button>
      </span>
    </el-dialog>
    <dialog-commodity-color-size
      ref="colorSizeDialog"
      @confirmSelect="handleConfirmSelect"
      @deleteProperty="handleDeleteSelect"
    ></dialog-commodity-color-size>
  </div>
</template>

<script>
import DialogCommodityLibrary from './dialogCommodityLibrary'
import DialogTree from './dialogTree'
import NewCategory from '@/components/c_category/NewCategory'
import PopupReminder from './popupReminder'
import PopupSuccess from './popupSuccess'
import dialogCommodityColorSize from './dialogCommodityColorSize.vue'
import { postAction, getAction, httpAction } from '@/api/manage'
import { formatMoney, formatPrice, formatNumber, formatFour, delcommafy } from '@/utils/index'
import { ACCESS_TOKEN, TENANT_ID, USER_INFO, ACCOUNT_BOOK } from '@/store/mutation-types'
import Vue from 'vue'
import draggable from 'vuedraggable'
export default {
  name: 'dialogCommodityAdd',
  components: {
    DialogCommodityLibrary,
    DialogTree,
    PopupReminder,
    PopupSuccess,
    NewCategory,
    draggable,
    dialogCommodityColorSize,
  },
  props: {
    isMask: {
      type: Boolean,
      default: true,
    },
  },
  created() {
    this.getUnitList()
  },
  computed: {
    zdkcNum() {
      let num = 0
      this.newData.goodsWarnings.forEach((item, index) => {
        if (index != 0) {
          if (item.miniStock && item.miniStock != '') {
            num += parseInt(item.miniStock)
          }
        }
      })
      return parseInt(num)
    },
    zgkcNum() {
      let num = 0
      this.newData.goodsWarnings.forEach((item, index) => {
        if (index != 0) {
          if (item.highStock && item.highStock != '') {
            num += parseInt(item.highStock)
          }
        }
      })
      return num
    },
    stockStatusDisabled() {
      return this.$store.getters.openAccountValue === 3
    },
    multiStockStatusDisabled() {
      if (this.$store.getters.openAccountValue === 3) {
        return true
      } else {
        return this.newData.initStorehouseStatus == 1 || !this.newData.stockStatus
      }
    },
  },
  data() {
    return {
      defaultData: {
        id: '',
        goodsName: '', //商品名称
        pinyinCode: '',
        goodsNumber: '', //商品编码
        productionAddress: '', //产地
        goodsNatureId: '1', //商品性质id 1：服务、2.劳务 3.商品（无成本）
        goodsNatureName: '',
        xghGoodsTypeId: '', //商品类别
        xghGoodsTypeName: '',
        costCalculation: '1', //成本核算
        barCode: '', //条形码
        specs: '', //规格
        defaultUnit: '', //默认单位
        baseUnit: '', //基本单位
        multiPriceStatus: false, //多单位状态 0:开启 1:关闭
        priceStatus: true, //价格管理状态 0:开启 1:关闭
        stockWarningStatus: true, //库存预警状态 0:开启 1:关闭
        multiStockWarningStatus: false, //分库存预警状态 0:开启 1:关闭
        stockStatus: false, //期初库存状态 0:开启 1:关闭
        multiStockStatus: false, //分期初库存状态 0:开启 1:关闭

        specialFunction: false, //商品特殊功能模块，1开启，0关闭
        specialFunctionColorId: '', //
        specialFunctionColorStr: '', //
        specialFunctionSizeId: '', //关联尺码属性id（多个逗号分隔）
        specialFunctionSizeStr: '', //
        specialFunctionStr: '', //
        specialFunctionType: '', //

        specialFunctionTypeColorSize: false, //商品特殊功能模块-颜色尺码

        goodsRemark: '', //备注
        goodsManyNorms: [
          //多单位及价格表数据
          {
            fakeId: '0',
            isDefault: '1', //是否是基本单位
            unitType: '基本单位', //单位类别 1.基本单位2.辅助单位
            unit: '', //单位
            scale: 1, //换算比例
            retailPrice: '', //零售价
            barCode: '', //条形码
            specs: '', //规格
            vipPric: '', //会员价
            presetPriceOne: '', //预设售价1
            presetPriceTwo: '', //预设售价2
            presetBidPrice: '', //预设进价
            discountRatioOne: '', //预设折扣1
            discountRatioTwo: '', //预设折扣2
            xhState: true,
          },
        ],
        goodsWarnings: [
          //仓库预警数据
          {
            fakeId: '0',
            xghStorehouseId: '', //仓库id
            xghStorehouseName: '总数量预警',
            miniStock: 0, //最低库存
            highStock: 0, //最高库存
            xhState: true,
          },
        ],
        initialInventoryInfos: [],
      },
      newData: {},
      dialogTitle: '新增商品',
      submitLoading: false,
      nameFocus: false,
      // 商品性质选项
      spxzOptions: [
        {
          value: '1',
          label: '服务',
        },
        {
          value: '2',
          label: '劳务',
        },
        {
          value: '3',
          label: '商品（无成本）',
        },
      ],
      // 传递给弹框的数据
      tipsData: {
        tipsState: '',
        tipsWords: '',
        tipsMark: '',
      },
      // 必填校验
      rules: {
        goodsName: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
        // goodsNumber: [{ required: true, message: '请输入商品编码', trigger: 'blur' }],
        // barCode: [{ required: true, message: '请输入商品条形码', trigger: 'blur' }],
        baseUnit: [{ required: true, message: '请选择基本单位', trigger: 'blur' }],
      },
      // 传递给选择类别的数据
      toTreeData: {
        module: {
          name: 'goodsTypeName', //类别名称字段
          code: 'goodsCode', //类别编码字段
          pyCode: 'goodsPinyinCode', //类别拼音码字段
          indexCode: 'goodsIndexCode', //类别排序码字段
        },
        getTreeUrl: '/goodType/treeList', //获取类别接口
        deleteTreeUrl: '/goodType/deleteById', //删除类别接口
        addTreeUrl: '/goodType/add', //新增类别接口
        editTreeUrl: '/goodType/edit', //修改类别接口
      },
      // 价格管理列名
      jgglColumn: [
        {
          label: '单位类别',
          props: 'unitType',
        },
        {
          label: '单位',
          props: 'unit',
        },
        {
          label: '换算比率',
          props: 'scale',
        },
        {
          label: '条形码',
          props: 'barCode',
        },
        { label: '规格', props: 'specs' },
        {
          label: '零售价',
          props: 'retailPrice',
        },
        {
          label: '预设售价一',
          props: 'presetPriceOne',
        },
        { label: '预售售价二', props: 'presetPriceTwo' },
        { label: '预设进价', props: 'presetBidPrice' },
        { label: '预设折扣一(%)', props: 'discountRatioOne' },
        { label: '预设折扣二(%)', props: 'discountRatioTwo' },
      ],
      jgglColumn1: [
        {
          label: '单位信息',
          subset: [
            { label: '单位类别', props: 'unitType' },
            { label: '单位', props: 'unit' },
            { label: '换算比率', props: 'scale' },
            { label: '条形码', props: 'barCode' },
            { label: '规格', props: 'specs' },
          ],
        },
        {
          label: '价格信息',
          subset: [
            { label: '零售价', props: 'retailPrice' },
            { label: '预设售价一', props: 'presetPriceOne' },
            { label: '预售售价二', props: 'presetPriceTwo' },
            { label: '预设进价', props: 'presetBidPrice' },
          ],
        },
        {
          label: '折扣信息',
          subset: [
            { label: '预设折扣一(%)', props: 'discountRatioOne' },
            { label: '预设折扣二(%)', props: 'discountRatioTwo' },
          ],
        },
        // {
        //   label: '扩展信息',
        //   subset: [
        //     { label: '预设折扣一(%)', props: 'discountRatioOne' },
        //     { label: '预设折扣二(%)', props: 'discountRatioTwo' },
        //   ]
        // },
      ],
      // 仓库预警列名
      ckyjColumn: [
        {
          label: '仓库名称',
          props: 'xghStorehouseName',
        },
        {
          label: '最低库存',
          props: 'miniStock',
        },
        {
          label: '最高库存',
          props: 'highStock',
        },
      ],
      // 期初库存列名
      qckcColumn: [
        {
          label: '仓库名称',
          props: 'storehouseId_dictText',
        },
        {
          label: '期初库存数量',
          props: 'numberShow',
        },
        {
          label: '单位',
          props: 'unit',
        },
        {
          label: '期初单位成本价',
          props: 'costPriceShow',
        },
        {
          label: '期初库存总金额',
          props: 'stockPriceShow',
        },
      ],
      // 基本单位选项
      jbdwOptions: [],
      //商品类别列表
      splbOptions: [],
      // 默认单位选项
      mrdwOptions: [],
      // 仓库预警表格数据
      ckyjCkmcOptions: [],
      addUnitName: '', //新增一条基本单位
      dialogVisible: false,
      ckyjIndex: -1,
      qckcIndex: -1,
      selectedCkyjCkmc: [], //已选择仓库预警的仓库名称 用来判断是否重复选择
      selectedQckcCkmc: [],
      jbdwDialogVisible: false,
      deleteList: [], // 编辑单据删除数据
      insertList: [], // 编辑单据增加数据
      updateList: [], // 编辑单据修改数据
      infoList: [], // 单据原有的数据
      showNewTree: false, // 是否显示新增类别弹窗
      // 传递数据给新增类别组件
      newTreeData: {
        parentNode: '',
        nowNode: '',
        module: {
          name: '',
        },
      },
      uploadAction: window._CONFIG['domianURL'] + '/sys/common/upload',
      headers: { 'X-Access-Token': Vue.ls.get(ACCESS_TOKEN) },
      attachments: [],
      sourceData: {},
    }
  },
  watch: {
    'newData.barCode': {
      handler() {
        if (this.newData.goodsManyNorms && this.newData.goodsManyNorms.length > 0) {
          this.newData.goodsManyNorms[0].barCode = this.newData.barCode
        }
      },
      deep: true,
    },
    'newData.specs': {
      handler() {
        if (this.newData.goodsManyNorms && this.newData.goodsManyNorms.length > 0) {
          this.newData.goodsManyNorms[0].specs = this.newData.specs
        }
      },
      deep: true,
    },
  },
  methods: {
    async show(data, columnData) {
      this.sourceData = JSON.parse(JSON.stringify(data))
      this.newData = JSON.parse(JSON.stringify(data))
      this.getUnitList()
      this.getGoodsType()
      this.dialogVisible = true
      console.log(this.newData)
      if (!this.newData.id) {
        this.$nextTick(() => {
          this.$refs.nameInput.focus()
        })
        this.dialogTitle = '新增商品'
      } else {
        this.dialogTitle = '编辑商品'
      }
      this.attachments = (this.newData.goodsImg || '').split(',').filter((item) => item)
      this.$set(this.newData, 'specialFunctionTypeColorSize', (this.newData.specialFunctionType || '').includes('1'))
      this.newData.specialFunction = this.newData.specialFunction == '1'
      console.log(this.newData)

      // console.log(columnData)

      if (!columnData) {
        let obj = await this.$setColumn.selectColumn('商品信息')
        if (obj.code === 200) {
          columnData = JSON.parse(JSON.stringify(obj.columnData))
        }
      }

      if (columnData) {
        //扩展属性
        let list = columnData
          .map((item) => {
            if (item.props.includes('extendField')) {
              return {
                label: item.zidingyiName || item.morenName,
                props: item.props,
              }
            }
          })
          .filter((item) => item)
        this.jgglColumn1 = this.$options.data().jgglColumn1
        this.jgglColumn1.push({
          label: '扩展属性',
          subset: list,
        })
      }
    },
    handleDeleteSelect(item) {
      console.log(item);
      
      //未选择或者保存过都不处理
      if ((item.type == 1 && !this.newData.specialFunctionColorId) || (item.type == 2 && !this.newData.specialFunctionSizeId)) {
        return
      }
      let ids = []
      let text = []
      if (item.type == 1) {
        ids = this.newData.specialFunctionColorId.split(',') || []
        text = this.newData.specialFunctionColorStr.split('|') || []
      } else {
        ids = this.newData.specialFunctionSizeId.split(',') || []
        text = this.newData.specialFunctionSizeStr.split('|') || []
      }
      let index = ids.findIndex((el) => el == item.id)
      if (index != -1) {
        ids.splice(index, 1)
        text.splice(index, 1)
        this.handleConfirmSelect({
          ids: ids.join(','),
          text: text.join('|'),
          type: item.type,
        })
      }
    },
    handleConfirmSelect(item) {
      console.log(item)
      if (item.type == 1) {
        this.newData.specialFunctionColorId = item.ids
        this.$set(this.newData, 'specialFunctionColorStr', item.text)
      } else {
        this.newData.specialFunctionSizeId = item.ids
        this.$set(this.newData, 'specialFunctionSizeStr', item.text)
      }
    },
    onSelectColorSize(type) {
      if (type == 'color') {
        // if (this.sourceData.specialFunctionColorId && this.newData.id) {
        //   return this.$message.warning('颜色属性保存后不能再修改') //颜色属性保存后不能再修改
        // }
        let ids = (this.newData.specialFunctionColorId && this.newData.specialFunctionColorId.split(',')) || []
        let text = (this.newData.specialFunctionColorStr && this.newData.specialFunctionColorStr.split('|')) || []
        let list = []
        for (let i = 0; i < ids.length; i++) {
          list.push({
            id: ids[i],
            text: text[i],
          })
        }
        let doOrder = '0'  //1做过单据  0 未做过
				let lockIds = ''
				if (this.newData.id && this.sourceData.specialFunctionColorId) {
					doOrder = this.newData.doOrder 
					lockIds = this.sourceData.specialFunctionColorId
				}
        this.$refs.colorSizeDialog.show({
          type,
          doOrder,
          lockIds
        }, list)
      } else if (type == 'size') {
        // if (this.sourceData.specialFunctionSizeId && this.newData.id) {
        //   return this.$message.warning('尺码属性保存后不能再修改') //尺码属性保存后不能再修改
        // }
        let ids = (this.newData.specialFunctionSizeId && this.newData.specialFunctionSizeId.split(',')) || []
        let text = (this.newData.specialFunctionSizeStr && this.newData.specialFunctionSizeStr.split('|')) || []
        let list = []
        for (let i = 0; i < ids.length; i++) {
          list.push({
            id: ids[i],
            text: text[i],
          })
        }
        let doOrder = '0'  //1做过单据  0 未做过
				let lockIds = ''
				if (this.newData.id && this.sourceData.specialFunctionSizeId) {
					doOrder = this.newData.doOrder 
					lockIds = this.sourceData.specialFunctionSizeId
				}
        this.$refs.colorSizeDialog.show({
          type,
          doOrder,
          lockIds
        }, list)
      }
    },
    beforeUpload(file) {
      let type = file.type.toLowerCase()
      const isJPG = type.includes('png') || type.includes('jpeg') || type.includes('jpg')
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('请上传png/jpg/jpeg格式的图片!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    handleSuccess(e) {
      console.log(e)
      if (e.success) {
        if (this.attachments.length < 5) {
          this.attachments.push(e.message)
        } else {
          this.$message.error('最多支持上传5张!')
        }
      }
    },
    delAttachment(index) {
      this.attachments.splice(index, 1)
    },
    onMoveEnd() {
      // console.log(this.attachments);
    },
    getGoodsType() {
      // 获取商品类别
      getAction('/xghGoodsType/xghGoodsType/typeList', {}).then((res) => {
        if (res.code === 200) {
          this.splbOptions = res.result
        }
      })
    },
    getUnitList(type) {
      if (!type || type == 'unit') {
        // 获取单位列表数据
        getAction('/xghUnit/xghUnit/list', {}).then((res) => {
          if (res.code === 200) {
            this.jbdwOptions = res.result
          } else {
            this.$elMessage.error(res.message)
          }
        })
      }

      if (!type) {
        // 获取商品类别
        getAction('/xghGoodsType/xghGoodsType/typeList', {}).then((res) => {
          if (res.code === 200) {
            this.splbOptions = res.result
          }
        })
        // 获取仓库列表数据
        getAction('/xghStorehouse/xghStorehouse/queryListByPole', {}).then((res) => {
          if (res.code === 200) {
            this.ckyjCkmcOptions = res.result
          } else {
            this.$elMessage({
              showClose: true,
              message: res.message,
              type: 'error',
              iconClass: 'el-icon-warning-outline',
              duration: 3000,
            })
          }
        })
      }
    },
    onAddjbdw() {
      // if (!this.addUnitName) {
      //   return this.$elMessage.error('请输入基本单位')
      // }
      console.log(this.addUnitName)
      let reg = /^[a-zA-Z\u4e00-\u9fa5]+$/
      let r = reg.test(this.addUnitName)
      if (!r) {
        return this.$elMessage.error('请输入通用的基本单位')
      }
      // 获取单位列表数据
      postAction('/xghUnit/xghUnit/add', {
        unitName: this.addUnitName,
      }).then((res) => {
        if (res.code === 200) {
          this.jbdwDialogVisible = false
          this.$elMessage.success('添加成功！')
          this.getUnitList('unit')
          let old_unit = this.newData.goodsManyNorms[0].unit
          this.newData.goodsManyNorms[0].unit = this.addUnitName
          this.newData.baseUnit = res.result
          if (
            !this.newData.defaultUnit ||
            (this.newData.goodsManyNorms.length == 1 && old_unit == this.newData.defaultUnit)
          ) {
            this.newData.defaultUnit = this.addUnitName
          }
        } else {
          this.$elMessage.error(res.message)
        }
      })
    },
    stockStatusChange(val) {
      if (val) {
        this.addInitialInventoryInfos()
      } else {
        this.newData.initialInventoryInfos = []
      }
    },
    // 触发新增树形节点按钮
    onAddTree() {
      this.newTreeData = {
        data: { id: '0' },
        state: 'add',
        module: {
          name: 'goodsTypeName', //类别名称字段
          code: 'typeCode', //类别编码字段
          pyCode: 'pinYinCode', //类别拼音码字段
          indexCode: 'indexCode', //类别排序码字段
        },
        getTreeUrl: '/xghGoodsType/xghGoodsType/typeList', //获取类别接口
        deleteTreeUrl: '/goodType/deleteById', //删除类别接口
        addTreeUrl: '/xghGoodsType/xghGoodsType/add', //新增类别接口
        editTreeUrl: '/xghGoodsType/xghGoodsType/edit', //修改类别接口
      }
      this.showNewTree = true
    },
    // 类别信息新增/修改后数据获取
    onSaveTreeChanges() {
      this.getGoodsType()
      this.showNewTree = false
    },
    colorSizeStatusChange(val) {},
    multiPriceStatusChange(val) {
      if (!val && (this.newData.goodsManyNorms || this.newData.goodsManyNorms.length > 1)) {
        let obj = this.newData.goodsManyNorms[0]
        obj.xhState = true
        this.newData.goodsManyNorms = [obj]
      } else if ((val && this.newData.goodsManyNorms) || this.newData.goodsManyNorms.length == 1) {
        this.newData.goodsManyNorms[0].xhState = false
      }
    },
    multiStockWarningStatusChange(val) {
      if (!val && (this.newData.goodsWarnings || this.newData.goodsWarnings.length > 1)) {
        let obj = this.newData.goodsWarnings[0]
        obj.xhState = true
        this.newData.goodsWarnings = [obj]
        this.selectedCkyjCkmc = []
      } else if ((val && this.newData.goodsWarnings) || this.newData.goodsWarnings.length == 1) {
        this.newData.goodsWarnings[0].xhState = false
      }
    },
    multiStockStatusChange(val) {
      if (!val && (this.newData.initialInventoryInfos || this.newData.initialInventoryInfos.length > 1)) {
        let obj = this.newData.initialInventoryInfos[0]
        obj.xhState = true
        this.newData.initialInventoryInfos = [obj]
        this.selectedQckcCkmc = []
      } else if ((val && this.newData.initialInventoryInfos) || this.newData.initialInventoryInfos.length == 1) {
        this.newData.initialInventoryInfos[0].xhState = false
      }
    },
    // 查询商品库信息
    retrieveGoods() {
      if (this.newData && this.newData.goodsName == '') {
        this.tipsData.tipsWords = '请输入商品名称检索！'
        this.tipsData.tipsMark = 'retrieveGoods'
        this.$refs.reminderRef.dialogVisible = true
      } else {
        this.$refs.commodityLibraryRef.getData()
        this.$refs.commodityLibraryRef.dialogVisible = true
      }
    },
    // 选择当前商品数据
    onSelectCommodity(val) {
      this.newData.id = val.id
      this.newData.goodsName = val.name
      this.newData.barCode = val.barcode
      this.newData.productionAddress = val.originName
      this.newData.specs = val.specification
      this.newData.baseUnit = val.unit
      this.newData.defaultUnit = val.unit
      this.newData.goodsManyNorms[0].unit = val.unit
      this.unitName = val.unit
      this.getUnitList()
    },
    // 自动合计金额
    onNumber(key, val) {
      switch (key) {
        case 'costPriceShow':
          val.costPrice = formatFour(delcommafy(val.costPriceShow))
          val.costPriceShow = formatPrice(delcommafy(val.costPrice))
          break
        case 'numberShow':
          val.number = formatFour(delcommafy(val.numberShow))
          val.numberShow = formatNumber(delcommafy(val.number))
          break
      }
      // 库存金额 = 库存数量 * 成本价
      val.stockPrice = formatFour(delcommafy(val.costPrice) * delcommafy(val.number))
      val.stockPriceShow = formatMoney(delcommafy(val.stockPrice))
      val.zsNumber = delcommafy(val.number) * delcommafy(val.scale || 1)
    },
    onNumberCostPrice(k = '', val) {
      switch (k) {
        case 'stockPriceShow':
          val.stockPrice = formatFour(delcommafy(val.stockPriceShow))
          val.stockPriceShow = formatPrice(delcommafy(val.stockPrice))
          break
      }
      // 成本价 = 库存金额/库存数量
      val.costPrice = formatFour(delcommafy(val.stockPrice) / delcommafy(val.number))
      val.costPriceShow = formatPrice(delcommafy(val.costPrice))
      val.zsNumber = delcommafy(val.number) * delcommafy(val.scale || 1)
    },
    changeUnit(val) {
      if (this.newData.goodsManyNorms && this.newData.goodsManyNorms.length > 0) {
        // 查找选择的单位对应的数据
        const unitArr = this.newData.goodsManyNorms.filter((item) => item.unit == val.unit)
        if (unitArr && unitArr.length > 0) {
          const data = unitArr[0]
          // 用换算比例计算数量
          const scale = val.scale ? data.scale / val.scale : 1
          // 用换算比例计算价格
          const scalePrice = val.scale ? val.scale / data.scale : 1
          // 存储换算比例
          val.scale = delcommafy(data.scale)
          val.number = formatFour(delcommafy(val.number) / scale)
          val.numberShow = formatNumber(val.number)
          val.costPrice = formatFour(delcommafy(val.costPrice) / scalePrice)
          val.costPriceShow = formatPrice(val.costPrice)
          // 计算金额
          this.onNumber('', val)
        }
      }
    },
    // 转换拼音码
    getNameToPinying(event) {
      console.log(event.target.value)
      this.newData.pinyinCode = this.$pinyin.getJp(event.target.value)
    },
    scanClick() {
      this.$elMessage.warning('请使用扫码枪扫描')
    },
    // {
    //       label: '零售价',
    //       props: 'retailPrice',
    //     },
    //     {
    //       label: '预设售价一',
    //       props: 'presetPriceOne',
    //     },
    //     { label: '预售售价二', props: 'presetPriceTwo' },
    //     { label: '预设进价', props: 'presetBidPrice' },
    //     { label: '预设折扣一(%)', props: 'discountRatioOne' },
    //     { label: '预设折扣二(%)', props: 'discountRatioTwo' },
    scaleInput(val, index) {
      console.log(val, index)
      let array = this.newData.goodsManyNorms
      if (array.length > index && index > 0) {
        let item = array[index]
        let zero = array[0]
        item.retailPrice = this.multiply(zero.retailPrice, val) // Number(zero.retailPrice) * Number(val)
        item.presetPriceOne = this.multiply(zero.presetPriceOne, val)
        item.presetPriceTwo = this.multiply(zero.presetPriceTwo, val)
        item.presetBidPrice = this.multiply(zero.presetBidPrice, val)
        item.discountRatioOne = zero.discountRatioOne
        item.discountRatioTwo = zero.discountRatioTwo
      }
    },
    multiply(num1, num2) {
      if (!num1 || !num2) {
        return ''
      }
      const num1Str = num1.toString()
      const num2Str = num2.toString()
      const num1Digits = num1Str.includes('.') ? num1Str.length - num1Str.indexOf('.') - 1 : 0
      const num2Digits = num2Str.includes('.') ? num2Str.length - num2Str.indexOf('.') - 1 : 0
      const precision = num1Digits + num2Digits

      const num1Int = parseInt(num1Str.replace('.', ''))
      const num2Int = parseInt(num2Str.replace('.', ''))

      let result = num1Int * num2Int
      result /= Math.pow(10, precision)

      return result
    },

    // 打开选择类别弹出框
    onShowTree() {
      this.$refs.treeRef.getTreeData()
      this.$refs.treeRef.dialogVisible = true
    },
    // 选择当前类别
    onSelectTree(val) {
      this.newData.xghGoodsTypeId = val.id
      this.newData.xghGoodsTypeName = val.goodsTypeName
      this.$forceUpdate()
    },
    // 基本单位发生改变
    onChangeJbdw(val) {
      // 1.把当前选择的基本单位赋值给价格管理表第一条的单位值
      this.newData.goodsManyNorms[0].unit = val.unitName
      // 清除效验
      this.$refs['ruleForm'].clearValidate(['baseUnit'])
      // 2.然后存储当前点击的基本单位值
      // this.addUnitName = val.id
      // 3.去调用获取基本单位接口，由后端判断当前的基本单位值是否存在，如果不存在就是新增，存在了就是查询
      // this.getUnitList()
      // 4.调用新增默认单位的方法
      // this.addMrdwOptions()
    },
    // 选择其中一条基本单位
    onClickJbdw(val) {
      this.newData.goodsManyNorms[0].unit = val.unitName
      this.newData.defaultUnit = val.unitName
      for (let i = 1; i < this.newData.goodsManyNorms.length; i++) {
        if (val.unitName === this.newData.goodsManyNorms[i].unit) {
          this.newData.goodsManyNorms.splice(i, 1)
        }
      }
    },
    // 点击修改价格管理表样式
    onClickJggl(row) {
      this.newData.goodsManyNorms.forEach((item) => {
        if (item.id) {
          item.xhState = !(item.id == row.id)
        } else {
          item.xhState = !(item.fakeId == row.fakeId)
        }
      })
      this.$forceUpdate()
    },
    // 点击修改仓库预警表样式
    onClickCkyj(row) {
      this.newData.goodsWarnings.forEach((item, index) => {
        if (item.id) {
          item.xhState = !(item.id == row.id)
        } else {
          item.xhState = !(item.fakeId == row.fakeId)
        }
        if (!item.xhState) {
          this.ckyjIndex = index
        }
      })
      this.$forceUpdate()
    },
    // 点击修改期初库存表样式
    onClickQckc(row) {
      this.newData.initialInventoryInfos.forEach((item, index) => {
        // if (item.id && item.id == row.id && !item.xhState) {
        //   item.xhState = true
        // } else if (item.fakeId && item.fakeId == row.fakeId && !item.xhState) {
        //   item.xhState = true
        // } else {
        if (item.id) {
          item.xhState = !(item.id == row.id)
        } else {
          item.xhState = !(item.fakeId == row.fakeId)
        }
        // }
        if (!item.xhState) {
          this.qckcIndex = index
        }
      })
      this.$forceUpdate()
    },
    // 新增弹框中表格新增一条数据
    addRow(index, mark) {
      if (mark == 'jggl') {
        let index0 = this.newData.goodsManyNorms[0]
        console.log(index0)

        let obj = {
          fakeId: this.newData.goodsManyNorms.length,
          xhState: false,
          isDefault: '0',
          unitType: '辅助单位',
          unit: '',
          scale: '1',
          barCode: '',
          specs: '',
          retailPrice: '',
          presetPriceOne: '',
          presetPriceTwo: '',
          presetBidPrice: '',
          discountRatioOne: '',
          discountRatioTwo: '',
          extendField1: index0.extendField1,
          extendField2: index0.extendField2,
          extendField3: index0.extendField3,
          extendField4: index0.extendField4,
          extendField5: index0.extendField5,
        }
        this.newData.goodsManyNorms.forEach((item) => {
          item.xhState = true
        })
        this.newData.goodsManyNorms.splice(index + 1, 0, obj)
      }
      if (mark == 'ckyj') {
        this.newData.goodsWarnings.forEach((item) => {
          item.xhState = true
        })
        let obj = {
          fakeId: this.newData.goodsWarnings.length,
          xhState: false,
          xghStorehouseName: '',
          xghStorehouseId: '',
          miniStock: '',
          highStock: '',
        }
        this.newData.goodsWarnings.splice(index + 1, 0, obj)
        this.ckyjIndex = this.newData.goodsWarnings.length - 1
      }
      if (mark == 'qckc') {
        this.newData.initialInventoryInfos.forEach((item) => {
          item.xhState = true
        })
        let obj = {
          fakeId: this.newData.initialInventoryInfos.length,
          xhState: false,
          storehouseId_dictText: '',
          storehouseId: '',
          number: '0',
          costPrice: '0',
          stockPrice: '0',
          numberShow: '0',
          costPriceShow: '0',
          stockPriceShow: '0',
          isDefault: '0',
        }
        this.newData.initialInventoryInfos.splice(index + 1, 0, obj)
        this.qckcIndex = this.newData.initialInventoryInfos.length - 1
      }
    },
    // 新增弹框中表格删除当前行数据
    deleteRow(index, mark) {
      if (mark == 'jggl') {
        this.newData.goodsManyNorms.splice(index, 1)
      }
      if (mark == 'ckyj') {
        let shId = this.newData.goodsWarnings[index].xghStorehouseId
        this.removeSelectStorehourseById(shId, mark)
        this.newData.goodsWarnings.splice(index, 1)
      }
      if (mark == 'qckc') {
        let shId = this.newData.initialInventoryInfos[index].storehouseId
        // 保存过的数据删除的时候添加到列表数据中
        if (this.newData.id && this.newData.initialInventoryInfos[index].id) {
          this.deleteList.push(this.newData.initialInventoryInfos[index])
        }
        this.removeSelectStorehourseById(shId, mark)
        this.newData.initialInventoryInfos.splice(index, 1)
      }
    },
    removeSelectStorehourseById(id, mark) {
      if (mark == 'ckyj') {
        let i = -1
        for (let index = 0; index < this.selectedCkyjCkmc.length; index++) {
          const element = this.selectedCkyjCkmc[index]
          if (element.xghStorehouseId == id) {
            i = index
            break
          }
        }
        if (i > -1) {
          this.selectedCkyjCkmc.splice(i, 1)
        }
      } else {
        let i = -1
        for (let index = 0; index < this.selectedQckcCkmc.length; index++) {
          const element = this.selectedQckcCkmc[index]
          if (element.storehouseId == id) {
            i = index
            break
          }
        }
        if (i > -1) {
          this.selectedQckcCkmc.splice(i, 1)
        }
      }
    },
    // 价格管理中选择其中一条基本单位
    onClickTableJbdw(val, tableIndex) {
      for (let i = 0; i < this.mrdwOptions.length; i++) {
        if (val.unitName === this.mrdwOptions[i].unitName) {
          this.$elMessage({
            showClose: true,
            message: '不可选择重复的单位！',
            type: 'error',
            iconClass: 'el-icon-warning-outline',
            duration: 3000,
          })
          this.newData.goodsManyNorms[tableIndex].unit = ''
          return
        }
      }
      this.addMrdwOptions()
    },
    // 新增默认单位的方法
    addMrdwOptions() {
      this.mrdwOptions = []
      let str = JSON.stringify(this.newData.goodsManyNorms)
      let arr = JSON.parse(str)
      let newArr = this.unique(arr)
      newArr.forEach((item) => {
        this.mrdwOptions.push({
          unitName: item.unit,
        })
      })
    },
    defaultUnitFocus() {
      this.mrdwOptions = []
      let str = JSON.stringify(this.newData.goodsManyNorms)
      let arr = JSON.parse(str)
      let newArr = this.unique(arr)
      newArr.forEach((item) => {
        this.mrdwOptions.push({
          unitName: item.unit,
        })
      })
    },
    // 数组去重
    unique(arr) {
      const res = new Map()
      return arr.filter((arr) => !res.has(arr.unit) && res.set(arr.unit, 1))
    },
    // 仓库预警中选择选择其中一条仓库名称
    onSelectCkyjCkmc(data) {
      let isSelf = this.isSelf(data.id)
      console.log('isSelf: ', isSelf)
      let hasOther = this.hasOther(data.id)
      console.log('hasOther: ', hasOther)
      if (hasOther && !isSelf) {
        this.$elMessage({
          showClose: true,
          message: '不可选择重复的仓库名称！',
          type: 'error',
          iconClass: 'el-icon-warning-outline',
          duration: 3000,
        })
        this.newData.goodsWarnings[this.ckyjIndex].xghStorehouseId = ''
        this.newData.goodsWarnings[this.ckyjIndex].xghStorehouseName = ''
        this.removeSelectStorehourseById(data.id, 'ckyj')
        return
      }
      // for (let i = 0; i < this.selectedCkyjCkmc.length; i++) {
      //   if (data.id == this.selectedCkyjCkmc[i].xghStorehouseId && !isSelf) {
      //     this.$elMessage({
      //       showClose: true,
      //       message: '不可选择重复的仓库名称！',
      //       type: 'error',
      //       iconClass: 'el-icon-warning-outline',
      //       duration: 3000,
      //     })
      //     this.newData.goodsWarnings[this.ckyjIndex].xghStorehouseId = ''
      //     this.newData.goodsWarnings[this.ckyjIndex].xghStorehouseName = ''
      //     this.removeSelectStorehourseById(data.id, 'ckyj')
      //     return
      //   }
      // }
      this.newData.goodsWarnings[this.ckyjIndex].xghStorehouseId = data.id
      this.newData.goodsWarnings[this.ckyjIndex].xghStorehouseName = data.storehouseName
      this.selectedCkyjCkmc.push({
        xghStorehouseId: data.id,
        xghStorehouseName: data.storehouseName,
      })
    },
    isSelf(id) {
      console.log('ckyjIndex: ', this.ckyjIndex)
      for (let index = 0; index < this.newData.goodsWarnings.length; index++) {
        const element = this.newData.goodsWarnings[index]
        if (index == this.ckyjIndex && id == element.xghStorehouseId) {
          console.log(id)
          console.log(element.xghStorehouseId)
          return true
        }
      }
      return false
    },
    hasOther(id) {
      for (let index = 0; index < this.newData.goodsWarnings.length; index++) {
        const element = this.newData.goodsWarnings[index]
        if (id && id == element.xghStorehouseId) {
          return true
        }
      }
      return false
    },

    // 数组去重
    uniqueCk(arr) {
      const res = new Map()
      return arr.filter((arr) => !res.has(arr.id) && res.set(arr.id, 1))
    },
    // 期初仓库中选择其中一条仓库名称
    onSelectQckcCkmc(data) {
      // for (let i = 0; i < this.selectedQckcCkmc.length; i++) {
      //   if (data.id == this.selectedQckcCkmc[i].storehouseId) {
      //     this.$elMessage({
      //       showClose: true,
      //       message: '不可选择重复的仓库名称！',
      //       type: 'error',
      //       iconClass: 'el-icon-warning-outline',
      //       duration: 3000,
      //     })
      //     this.newData.initialInventoryInfos[this.qckcIndex].storehouseId = ''
      //     this.newData.initialInventoryInfos[this.qckcIndex].storehouseId_dictText = ''
      //     this.removeSelectStorehourseById(data.id, 'qcck')
      //     return
      //   }
      // }
      let isSelf = this.isSelfByQC(data.id)
      console.log('isSelf: ', isSelf)
      let hasOther = this.hasOtherByQC(data.id)
      console.log('hasOther: ', hasOther)
      if (hasOther && !isSelf) {
        this.$elMessage({
          showClose: true,
          message: '不可选择重复的仓库名称！',
          type: 'error',
          iconClass: 'el-icon-warning-outline',
          duration: 3000,
        })
        this.newData.initialInventoryInfos[this.qckcIndex].storehouseId = ''
        this.newData.initialInventoryInfos[this.qckcIndex].storehouseId_dictText = ''
        this.removeSelectStorehourseById(data.id, 'qcck')
        return
      }
      this.newData.initialInventoryInfos[this.qckcIndex].storehouseId = data.id
      this.newData.initialInventoryInfos[this.qckcIndex].storehouseId_dictText = data.storehouseName
      this.selectedQckcCkmc.push({
        storehouseId: data.id,
        storehouseId_dictText: data.storehouseName,
      })
    },
    //QC = 期初
    isSelfByQC(id) {
      console.log('qckcIndex: ', this.qckcIndex)
      for (let index = 0; index < this.newData.initialInventoryInfos.length; index++) {
        const element = this.newData.initialInventoryInfos[index]
        if (index == this.qckcIndex && id == element.storehouseId) {
          console.log(id)
          console.log(element.storehouseId)
          return true
        }
      }
      return false
    },
    //QC = 期初
    hasOtherByQC(id) {
      for (let index = 0; index < this.newData.initialInventoryInfos.length; index++) {
        const element = this.newData.initialInventoryInfos[index]
        if (id && id == element.storehouseId) {
          return true
        }
      }
      return false
    },

    onAddSubmit(alsoAdd) {
      console.log(this.newData)
      let that = this
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          // 自动设置总库存预警
          /* if (this.newData.goodsWarnings && this.newData.goodsWarnings.length) {
            this.newData.goodsWarnings[0].highStock = this.zgkcNum
            this.newData.goodsWarnings[0].miniStock = this.zdkcNum
          } */

          //颜色尺码和多单位不能共存
				if (this.newData.goodsManyNorms.length > 1 && this.newData.specialFunctionTypeColorSize) {
					return this.$elMessage.error('开启颜色尺码后不支持多单位')
				}

          for (let index = 0; index < this.newData.goodsManyNorms.length; index++) {
            const element = this.newData.goodsManyNorms[index]
            if (!element.unit || !element.scale) {
              return this.$elMessage.error(`${element.unitType}的单位和换算比例不能为空！`)
            } else if (element.scale == 0) {
              return this.$elMessage.error(`${element.unitType}的换算比例不能为0！`)
            }
            let list = this.newData.goodsManyNorms.filter((item) => {
              return item.unit == element.unit
            })
            if (list.length > 1) {
              return this.$elMessage.error(`商品不能包含相同的单位！`)
            }

            this.newData.extendField1 = element.extendField1
            this.newData.extendField2 = element.extendField2
            this.newData.extendField3 = element.extendField3
            this.newData.extendField4 = element.extendField4
            this.newData.extendField5 = element.extendField5
          }
          if (
            this.newData.specialFunctionTypeColorSize &&
            (!this.newData.specialFunctionColorId || !this.newData.specialFunctionSizeId)
          ) {
            return this.$message.warning('颜色尺码开启后请先选择颜色和尺码属性')
          }
          if (!this.newData.id) {
            this.newData.disabledStatus = '1' //禁用状态 1-正常，2-冻结
            this.newData.deleteStatus = '0' //删除状态
          }
          if (this.newData.stockStatus) {
            for (const val of this.newData.initialInventoryInfos) {
              if (delcommafy(val.number) <= 0) {
                return this.$elMessage.error(`仓库[${val.storehouseId_dictText}]的期初库存数量不能小于0！`)
              }
              if (val.unit == null) {
                return this.$elMessage.error(`仓库[${val.storehouseId_dictText}]需要选择单位！`)
              }
              // 添加摘要信息
              val.summary += `[${val.goodsName},${formatNumber(val.number)}${val.unit}]`
            }
            this.$EventBus.$emit('addInventoryInfos', 0)
          }
          let url = '/xghGoods/xghGoods/add'
          let method = 'post'
          if (this.newData.id) {
            // 期初库存编辑
            if (this.newData.stockStatus) {
              const list = [...this.newData.initialInventoryInfos]
              this.insertList = list.filter((element) => !element.id)
              this.updateList = list.filter((element) => element.id && this.isListObj(this.infoList, element))
              this.newData.insertList = this.insertList
              this.newData.deleteList = this.deleteList
              this.newData.updateList = this.updateList
            } else {
              const list = [...this.newData.initialInventoryInfos]
              this.deleteList = list.filter((element) => element.id)
              this.newData.deleteList = this.deleteList
            }
            url = '/xghGoods/xghGoods/edit'
            method = 'put'
          }
          that.submitLoading = true
          this.newData.goodsImg = this.attachments.join(',')

          let params = {
            ...JSON.parse(JSON.stringify(this.newData)),
            specialFunction: Number(this.newData.specialFunction),
            specialFunctionType: `${this.newData.specialFunctionTypeColorSize ? '1' : ''}`,
          }
          // 调接口添加商品
          httpAction(url, params, method).then((res) => {
            that.submitLoading = false
            if (res.code === 200) {
              if (alsoAdd) {
                let xghGoodsTypeId = this.newData.xghGoodsTypeId
                this.newData = JSON.parse(JSON.stringify(this.defaultData))
                this.sourceData = JSON.parse(JSON.stringify(this.defaultData))
                this.newData.xghGoodsTypeId = xghGoodsTypeId
              } else {
                this.dialogVisible = false
              }
              this.$elMessage.success(res.message)
              that.$emit('onAddSubmit', res.result)
            } else {
              this.$elMessage({
                showClose: true,
                message: res.message,
                type: 'error',
                iconClass: 'el-icon-warning-outline',
                duration: 3000,
              })
            }
          })
        } else {
          this.$elMessage.error('请输入商品必需字段')
          return false
        }
      })
    },
    setInfos(obj) {
      // 重置和设置数据
      this.insertList = []
      this.deleteList = []
      this.updateList = []
      this.infoList = JSON.parse(JSON.stringify(obj))
    },
    isListObj(arr, obj) {
      for (let val of arr) {
        if (val.id == obj.id) {
          for (let key in val) {
            if (val[key] != obj[key]) {
              return true
            }
          }
        }
      }
      return false
    },
    //  添加期初库存数据
    addInitialInventoryInfos() {
      // 获取主仓库数据
      getAction('/xghStorehouse/xghStorehouse/getAccountBookDefaultStorehouse', {}).then((res) => {
        if (res.code === 200) {
          if (this.newData && this.newData.initialInventoryInfos) {
            let infoData = {
              fakeId: '0',
              isDefault: '1',
              storehouseId: res.result.id, //仓库id
              storehouseId_dictText: res.result.storehouseName,
              number: '0',
              costPrice: '0',
              stockPrice: '0',
              numberShow: '0',
              costPriceShow: '0',
              stockPriceShow: '0',
              xhState: true,
            }
            if (this.newData.initialInventoryInfos.length === 0) {
              this.newData.initialInventoryInfos.push(infoData)
            }
            if (this.selectedQckcCkmc.length === 0) {
              this.selectedQckcCkmc.push({
                storehouseId: infoData.storehouseId, //仓库id
                storehouseId_dictText: infoData.storehouseId_dictText,
              })
            }
          }
        } else {
          this.$elMessage.error(res.message)
        }
      })
    },
    // 仓库预警最高、最低库存
    blurCkyj(val, key) {
      // 最低库存数量不能大于最高库存数量
      if (key === 'highStock') {
        if (val.miniStock && val.miniStock !== '' && delcommafy(val.highStock) <= delcommafy(val.miniStock)) {
          val.highStock = ''
          this.$elMessage.error('最高库存必须大于最低库存！')
        }
      } else {
        if (val.highStock && val.highStock !== '' && delcommafy(val.highStock) <= delcommafy(val.miniStock)) {
          val.miniStock = ''
          this.$elMessage.error('最低库存必须小于最高库存！')
        }
      }
    },
    // 合计列计算
    getSummaries(param) {
      console.log(1233333)
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
        } else if (
          column.property == 'numberShow' ||
          column.property == 'costPriceShow' ||
          column.property == 'stockPriceShow'
        ) {
          const values = data.map((item) => delcommafy(item[column.property]))
          if (!values.every((value) => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = delcommafy(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            if (column.property == 'numberShow') {
              sums[index] = formatNumber(sums[index])
            } else {
              sums[index] = formatMoney(sums[index])
            }
          }
        } else {
          sums[index] = ''
        }
      })
      return sums
    },
    // 新增数据中表格内输入框聚焦时选中
    focusinSelect() {
      event.target.select()
    },
    focusout(e, s) {
      console.log(e)
      console.log(s)
      if (s.props.includes('extendField')) {
        if (this.newData.goodsManyNorms.length > 1) {
          for (let index = 1; index < this.newData.goodsManyNorms.length; index++) {
            let element = this.newData.goodsManyNorms[index]
            element[s.props] = this.newData.goodsManyNorms[0][s.props]
          }
        }
      }
    },
    // 关闭事件发射
    dialogVisibleClose() {
      this.selectedCkyjCkmc = []
      this.selectedQckcCkmc = []
      this.$emit('dialogVisibleClose')
    },
    // 显示基本单位添加弹窗
    showDialogVisible() {
      this.addUnitName = ''
      this.jbdwDialogVisible = true
      this.$nextTick(() => {
        this.$refs.autofocus.focus()
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.div-commodity {
  :first-child {
    ::v-deep .el-dialog {
      .el-dialog__body {
        padding: 0;
      }
    }
  }
}

.dialog_div_new {
  width: 100%;
  height: 70vh;
  overflow: hidden;
  overflow-y: scroll;
  background: #fff;

  .dialog_middle {
    margin-top: 0;
    padding-bottom: 0;
    box-sizing: border-box;
    padding: 0 30px;
    overflow: auto;

    ::v-deep .el-form-item {
      display: flex;
      width: 100%;
      margin-bottom: 0;
      .el-form-item__label {
        width: auto;
        min-width: 60px;
        line-height: 30px;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #666;
        text-align: justify;
        text-justify: distribute-all-lines;
        /*ie6-8*/
        text-align-last: justify;
        /* ie9*/
        -moz-text-align-last: justify;
        /*ff*/
        -webkit-text-align-last: justify;
        /*chrome 20+*/
        position: relative;

        &::before {
          position: absolute;
          right: 0;
          margin-right: 0;
          color: #ff0000;
          font-weight: 600;
        }
      }

      .el-form-item__content {
        margin-left: 8px;
        flex: 1;
        height: max-content;
        display: flex;
        align-items: center;

        .el-input {
          width: 100%;
          height: 30px;
          display: flex;
          align-items: center;

          .el-input__inner {
            height: 100%;
            padding: 0 0.187512rem;
            font-size: 12px;
            color: #666;
          }
        }
      }

      &:first-child {
        margin-right: 2%;
      }

      &:last-child {
        margin-left: 2%;
      }
    }
    div {
      p {
        margin: 0;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #666666;
      }

      input {
        flex: 1;
        height: 30px;
        background: #ffffff;
        border: 1px solid #e3e3e3;
        border-radius: 0.075005rem;
        font-size: 12px;
        color: #666;
        box-sizing: border-box;
        padding: 0 0.187512rem;

        &:focus {
          outline: none;
          border-color: #1890ff;
        }
      }

      ::v-deep .el-select {
        flex: 1;

        .el-input {
          .el-input__inner {
            height: 30px;
            background: #ffffff;
            border: 1px solid #e3e3e3;
            border-radius: 0.075005rem;
            font-size: 12px;
            color: #666;
            box-sizing: border-box;
            padding: 0 0.187512rem;
          }

          .el-input__suffix {
            height: 30px;
            display: flex;
            align-items: center;
          }
        }
      }
    }

    .line_detailedAddress {
      input {
        width: calc(100% - 1.031314rem);
        border-radius: 0.075005rem 0 0 0.075005rem;
        border-right: none;
      }

      ::v-deep .el-button {
        width: 60px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        background: #1890ff;
        border-radius: 5px;
      }
    }

    .input_switch {
      display: flex;
      height: 30px;
      margin-top: 0.281268rem;
      align-items: center;

      div {
        // flex: 1;
        display: flex;
        align-items: center;
        margin-right: 0.562535rem;
        align-items: center;

        p {
          font-size: 16px;
          color: #1893fc;
          // width: 0.937559rem;
          // width: 1.12507rem;
          text-align: justify;
          text-justify: distribute-all-lines;
          /*ie6-8*/
          text-align-last: justify;
          /* ie9*/
          -moz-text-align-last: justify;
          /*ff*/
          -webkit-text-align-last: justify;
          /*chrome 20+*/
        }

        span {
          color: #fd6c21;
          font-size: 12px;
          height: 100%;
          display: flex;
          align-items: center;
          padding-top: 2px;
          margin-left: 0.562535rem;
        }
      }
    }

    .input_textarea {
      display: flex;
      align-items: flex-start;
      margin-top: 0.281268rem;

      p {
        width: 0.937559rem;
        text-align: justify;
        text-justify: distribute-all-lines;
        /*ie6-8*/
        text-align-last: justify;
        /* ie9*/
        -moz-text-align-last: justify;
        /*ff*/
        -webkit-text-align-last: justify;
        /*chrome 20+*/
      }

      textarea {
        margin-left: 0.375023rem;
        flex: 1;
        background: #ffffff;
        border: 1px solid #e3e3e3;
        border-radius: 0.075005rem;
        font-size: 12px;
        color: #666;
        box-sizing: border-box;
        padding: 0.187512rem;

        &:focus {
          outline: none;
          border-color: #1890ff;
        }
      }
    }

    .sub_table {
      width: 100%;
      overflow-x: auto;
      margin-top: 0.187512rem;
      position: relative;

      ::v-deep .el-table {
        td,
        th {
          padding: 0;

          .cell {
            white-space: nowrap;
            font-size: 12px;
            color: #666;
            text-align: center;

            input {
              padding: 0 0.112507rem;
            }

            .first_line {
              color: #1893fc;
            }

            .index_select {
              display: flex;
              align-items: center;
              width: 100%;

              .el-select {
                width: 100%;

                .el-input {
                  display: flex;
                  height: 28px;

                  .el-input__inner {
                    height: 28px;
                    font-size: 12px;
                    color: #666;
                    border-radius: 0;
                  }

                  .el-input__icon {
                    line-height: 28px;
                  }

                  .el-input__suffix {
                    height: 28px;
                    line-height: 28px;
                  }
                }
              }
            }

            .index_input {
              display: flex;
              align-items: center;
              width: 100%;

              p {
                width: 100%;
                text-align: center;
                margin: 0;
              }

              input {
                width: 100%;
                height: 28px;
                border-radius: 0;
                border: none;
              }
            }
          }
        }
        .el-table__header {
          tr {
            &:last-child {
              th {
                background: rgb(237, 237, 237) !important;
              }
            }
          }
        }

        .first_index_button {
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;

          i {
            font-size: 20px;
            color: #1893fc;
          }
        }

        .index_button {
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;

          i {
            font-size: 20px;

            &:first-child {
              color: #1893fc;
            }

            &:last-child {
              color: #fd5050;
            }
          }
        }

        .el-table__body tr:hover > td {
          background: #e3f6ff;
        }

        //滚动条的宽度
        ::-webkit-scrollbar {
          width: 8px;
          height: 10px;
          background-color: #e5e5e5;
        }

        //滚动条的滑块
        ::-webkit-scrollbar-thumb {
          background-color: #c9c9c9;
        }
      }
    }

    .input_line {
      display: flex;
      height: 30px;
      margin-top: 0.281268rem;

      div {
        width: 32%;
        display: flex;
        align-items: center;
        box-sizing: border-box;

        &:first-child {
          margin-right: 2%;
        }

        &:last-child {
          margin-left: 2%;
        }

        ::v-deep .el-select {
          margin-left: 0.375023rem;
        }
      }

      > div {
        > p:first-child {
          display: block;
          width: 0.937559rem;
          text-align: justify;
          text-justify: distribute-all-lines;
          /*ie6-8*/
          text-align-last: justify;
          /* ie9*/
          -moz-text-align-last: justify;
          /*ff*/
          -webkit-text-align-last: justify;
          /*chrome 20+*/
        }

        input {
          margin-left: 0.375023rem;
        }
      }

      .line_dialog {
        width: 32%;

        .dialog_input {
          flex: 1;
          position: relative;
          display: flex;
          align-items: center;
          justify-content: flex-end;

          ::v-deep .el-select {
            margin-right: 0;

            .el-select-dropdown__item {
              p {
                margin: 0;
              }
            }

            i {
              display: none;
            }
          }

          i {
            position: absolute;
            margin-right: 0.187512rem;
            color: #bfbfbf;
            font-size: 0.281268rem;
            cursor: pointer;
          }
        }
      }
    }
  }
}
.dialog_bottom {
  width: 100%;
  height: 70px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;

  ::v-deep .el-button {
    //width: 60px;
    height: 30px;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    border-radius: 5px;
    background: #fff;
    border: 1px solid #dddddd;
    color: #666666;
  }

  ::v-deep .el-button--primary {
    background: #1890ff;
    border-color: #1890ff;
    color: #fff;
    margin-right: 15px;
  }

  ::v-deep .el-button--default {
    margin-left: 0;
  }
}
.form_div {
  width: 100%;
  height: 30px;
  display: flex;
  margin-top: 20px;

  .line_dialog {
    ::v-deep .el-form-item__content {
      position: relative;

      > i {
        position: absolute;
        right: 0.187512rem;
        color: #bfbfbf;
      }
    }

    .scan_p {
      position: absolute;
      right: 0.187512rem;
      display: flex;
      align-items: center;

      > span {
        color: #1890ff;
        margin-left: 0.093756rem;
      }
    }
  }

  .spmc_div {
    ::v-deep .el-form-item__content {
      flex: 1;
      // .el-input {
      //   width: calc(100% - 1.031314rem);
      //   .el-input__inner {
      //     border-radius: 0.075005rem 0 0 0.075005rem;
      //     border-right: none;
      //   }
      // }
      // .el-button {
      //   width: 1.031314rem;
      //   height: 30px;
      //   display: flex;
      //   align-items: center;
      //   justify-content: center;
      //   font-size: 12px;
      //   background: #1890ff;
      //   border-radius: 0 0.075005rem 0.075005rem 0;
      // }
    }
  }

  .disable_input {
    ::v-deep .el-input__inner {
      background-color: #ededed;
      border: 1px solid #e3e3e3;
      border-radius: 0.075005rem;
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #666666;
    }
  }
}

.custom_add {
  display: flex;
  justify-content: center;
  align-items: center;

  span {
    margin-left: 5px;
    color: #666666;
  }

  i {
    color: #666666;
  }
}
::v-deep .el-checkbox {
  .el-checkbox__label {
    font-size: 12px;
  }
}
.mask_view {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 20;
}
.attachment_view {
  border: 1px dashed white;
  width: 52px;
  height: 52px;
  background-color: #f6f6f6;
  line-height: 40px;
  text-align: center;
  border-radius: 3px;
  margin: 0 10px 6px 0;
}
.attachment_mask {
  z-index: 2;
  position: absolute;
  right: 0;
  top: 0;
  width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
}
.attachment_mask_pre {
  z-index: 1;
  position: absolute;
  display: flex;
  align-items: center;
  pointer-events: none;
  right: 0;
  top: 0;
  left: 0;
  bottom: 0;
  backdrop-filter: blur(1px);
  img {
    position: absolute;
    width: 14px;
    height: 14px;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
  }
}
.uploader {
  // border: 1px dashed #d9d9d9;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  width: 52px;
  height: 52px;
  margin: 0 10px 6px 0;
}
.special_item {
  width: 100%;
  font-size: 12px;
  display: flex;
  align-items: center;
  // height: 40px;
  margin-top: 10px;

  .special_text {
    width: 60px;
    padding-right: 12px;
    text-align: justify;
    text-justify: distribute-all-lines;
    /*ie6-8*/
    text-align-last: justify;
    /* ie9*/
    -moz-text-align-last: justify;
    /*ff*/
    -webkit-text-align-last: justify;
    /*chrome 20+*/
    position: relative;
  }
  .special_content {
    flex: 1;
    margin-left: 8px;
    margin-right: 4%;
    border: #e3e3e3 1px solid;
    border-radius: 5px;
    // height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5px;

    .special_value {
      // text-overflow: ellipsis;
      // display: -webkit-box;
      // -webkit-box-orient: vertical;
      // -webkit-line-clamp: 1;
      // overflow: hidden;
      word-break: break-all;
      padding: 5px 0 5px 5px;

    }
    span {
      color: #1890ff;
      cursor: pointer;
      padding: 5px;
      flex-shrink: 0;
    }
  }
}
</style>

